<template>
  <d2-container>
    <div class="edit-box">
      <div class="edit-header">
        <el-button @click="clgDocContent" type="warning">打印数据</el-button>
        <el-button @click="viewDocContent" type="warning">预览</el-button>
      </div>
      <div class="docs-body">
        <Flow
          ref="myFlow"
          class="body-flow"
          v-if="fileType === 'flow'"
          v-model="docContent"
          @saveData="handleClick('saveBefore')"
        ></Flow>
        <Minder
          ref="myMind"
          class="body-mind"
          v-else-if="fileType === 'mind'"
          v-model="docContent"
          @saveData="handleClick('saveBefore')"
        ></Minder>
        <Sheet
          v-else-if="fileType === 'sheet'"
          ref="mySheet"
          class="body-sheet"
          v-model="docContent.content"
        ></Sheet>
        <MDEditor
          v-else-if="fileType === 'md'"
          class="body-text"
          v-model="docContent.content"
          height="100%"
        ></MDEditor>
        <TEditor v-else-if="fileType === 'td'" class="body-text" v-model="docContent.content" height="100%" @handleClick="handleClick('saveBefore')"></TEditor>
      </div>
    </div>
  </d2-container>
</template>

<script>
import data from '../utils/data'
import tools from '../utils/tools'
import Vue from 'vue'
import Minder from '@/components/hk-minder'
Vue.use(Minder)

const Flow = resolve => require(['@/components/hk-flow/index'], resolve)
const Sheet = resolve => require(['@/components/hk-sheet/index'], resolve)
const MDEditor = resolve =>
  require(['@/components/hk-MDEditor/index'], resolve)
const TEditor = resolve => require(['@/components/hk-TEditor/TEditor'], resolve)

export default {
  components: { Flow, Sheet, MDEditor, TEditor },
  data () {
    return {
      docContent: {},
      fileType: ''
    }
  },
  mounted () {
    console.log(this.$route)
    this.fileType = this.$route.params.fileType
    if (this.$route.params.id) {
      this.id = this.$route.params.id
      this.getDataById()
    }
  },
  methods: {
    getDataById () {
      switch (this.id) {
        case '111':
          this.fileType = 'flow'
          break
        case '222':
          this.fileType = 'mind'
          break
        case '333':
          this.fileType = 'sheet'
          break
        case '444':
          this.fileType = 'md'
          break
        case '555':
          this.fileType = 'td'
          break
        default:
          break
      }
      if (this.fileType === 'flow') {
        this.docContent = JSON.parse(data.flowJson)
      } else if (this.fileType === 'mind') {
        this.docContent = JSON.parse(data.mindJson)
      } else if (this.fileType === 'sheet') {
        this.docContent = JSON.parse(data.sheetJson)
      } else if (this.fileType === 'md') {
        this.docContent = JSON.parse(data.mdJson)
      } else if (this.fileType === 'td') {
        this.docContent = JSON.parse(data.tdJson)
      }
    },
    handleClick (e) {
      console.log(e)
    },
    clgDocContent () {
      console.log(this.docContent)
      if (this.fileType === 'flow') {
        console.log(tools.getFlowJson(JSON.stringify(this.docContent)))
      } else {
        console.log(JSON.stringify(this.docContent))
      }
    },
    viewDocContent () {
      // this.$router.push({
      //   path: '/hk-view',
      //   query: { fileType: this.fileType, docContent: this.docContent }
      // })
      const newpage = this.$router.resolve({
        path: '/hk-view',
        query: { fileType: this.fileType, docContent: JSON.stringify(this.docContent) }
      })
      window.open(newpage.href, '_blank')
    }
  }
}
</script>
<style lang="scss">
.docs-edit {
  .edit-box {
    .synch-username {
      .user-view-img {
        width: 24px;
        height: 24px;
        font-size: 14px;
        line-height: 24px;
        border-radius: 12px;
      }
    }
    .docs-body {
      .body-sheet {
        .font-bold {
          background-position: initial;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.edit-box {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  .edit-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 38px;
    min-width: 1024px;
    background-color: #ffffff;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 99;
  }
  .docs-body {
    flex: 1;
    width: 100%;
    min-width: 1024px;
    position: relative;
    .body-text {
      display: flex;
      width: 100%;
      height: 100%;
      .teditor-loadedstyle {
        height: 100%;
      }
    }
    .body-text {
      .mdeditor-box {
        position: relative;
        width: 100%;
        .markdown {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          overflow: auto;
          transform: translateZ(0);
          &.border {
            border: 0 !important;
          }
        }
      }
      .teditor-loadedstyle {
        .tox-tinymce {
          border: 0;
          border-radius: 0;
        }
        .tox-mbtn {
          height: 28px;
        }
        .tox-menubar,
        .tox-toolbar-overlord {
          padding: 0 12%;
          background: #f9f9f9;
        }
        .tox-toolbar__overflow,
        .tox-toolbar__primary {
          background: none !important;
          border-top: 1px solid #eaeaea !important;
        }
        .tox-toolbar-overlord {
          border-bottom: 1px solid #e9e9e9 !important;
        }
        .tox-toolbar__group:not(:last-of-type) {
          border-right: 1px solid #eaeaea !important;
        }
        .tox-sidebar-wrap {
          margin: 22px 12%;
          border: 1px solid #e8e8e8;
          border-radius: 2px;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
          .tox-edit-area {
            border-top: 0;
          }
        }
        .tox-statusbar {
          border-top: 1px solid #e9e9e9;
          .tox-statusbar__resize-handle {
            display: none;
          }
        }
      }
    }
    .body-sheet {
      box-sizing: content-box;
      * {
        box-sizing: content-box;
      }
      .font-bold {
        background-position: initial;
      }
    }
  }
}
</style>
